<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wrap {
				float: left;
				width: 628px;
			}

			#left {
				float: left;
				background-color: pink;
				margin: 0;
				width: 140px;
			}

			#mid {
				float: right;
				margin-left: 10px;
				width: 478px;
			}

			#right {
				background-color: yellow;
				float: right;
				margin-left: 10px;
				width: 140px;
			}

			#left,
			#mid,
			#right,
			#wrap {
				outline: solid 1px pink;
				padding-bottom: 9999px;
				margin-bottom: -9999px;

			}

			#footer {
				clear: left;
				margin-top: -10px;
			}
			
			#main{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>页面区域</h1>
			</div>
			<div id="main">
				<div id="wrap">
					<div>
						<div id="mid">
							<p><strong>1.主栏</strong>
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							我就是我是不一样的烟火
							</p>
						</div>
					</div>
					<div>
						<div id="left">
							<p><strong>2.左栏</strong></p>
						</div>
					</div>
				</div>
				<div>
					<div id="right">
						<p><strong>3.右栏</strong></p>
					</div>
				</div>
			</div>
			<div id="footer">
				<p>页脚区域</p>
			</div>
		</div>
	</body>
</html>
